<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Gradient Backgrounds</title>
	<link rel="stylesheet" href="css/gradients.css" />
</head>
<body>
<div class="vertical-down"><p>default</p></div>
<div class="vertical-up"><p>to top</p></div>

<div class="horizontal-rt"><p>to right</p></div>
<div class="horizontal-lt"><p>to left</p></div>

<div class="angle-bot-rt"><p>to <br />bottom right</p></div>
<div class="angle-bot-lt"><p>to <br />bottom left</p></div>
<div class="angle-top-rt"><p>to top right</p></div>
<div class="angle-top-lt"><p>to top left</p></div>

<div class="angle-120deg"><p>120deg</p></div>
<div class="angle-290deg"><p>290deg</p></div>

<section class="radial">
	<div class="radial-center"><p>default</p></div>
	<div class="radial-top"><p>at top</p></div>

	<div class="radial-size-1"><p>100px, 50px</p></div>
	<div class="radial-size-2"><p>70% 90% at <br />bottom left</p></div>

	<div class="radial-various-1"><p>various 1</p></div>
	<div class="radial-various-2"><p>various 2</p></div>
</section>

<section class="color-stops">
	<div class="color-stops-1"><p>yellow 10%, green</p></div>
	<div class="color-stops-2"><p>to top right, yellow, <br>green 70%, <br>blue</p></div>
</section>
</body>
</html>
